<template>
  <div id="aconfirm">
    <Header />
    <el-breadcrumb separator=">>" style="margin-left: 20px; font-size: 15px">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">确认订单</a></el-breadcrumb-item>
    </el-breadcrumb>

    <el-row type="flex">
      <div>
        <img
          style="padding-left: 25px; padding-top: 20px"
          src="../../assets/images/u13577.png"
        />
      </div>
      <div style="padding-top: 30px; color: #169bd5">所选工地</div>
    </el-row>
    <el-row style="padding: 25px">
      <el-button autofocus="true" type="primary">旭辉运河悦章</el-button>
    </el-row>

    <el-row type="flex">
      <div>
        <img
          style="padding-left: 25px; padding-top: 20px"
          src="../../assets/images/u13577.png"
        />
      </div>
      <div style="padding-top: 30px; color: #169bd5">收货信息</div>
      <div>
        <el-button
          type="primary"
          style="margin: 20px; margin-left: 50px"
          icon="el-icon-circle-plus-outline"
          @click="dialogFormVisible = true"
          plain
          >新增收货地址</el-button
        >
        <el-dialog title="新增收货地址" :visible.sync="dialogFormVisible">
          <el-form :model="addressform">
            <el-form-item label="地址" :label-width="formLabelWidth">
              <el-input
                v-model="addressform.address"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="姓名" :label-width="formLabelWidth">
              <el-input
                v-model="addressform.name"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="电话" :label-width="formLabelWidth">
              <el-input
                v-model="addressform.phone"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false"
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </div>
    </el-row>
    <div style="margin-left: 25px">
      <el-table
        ref="singleTable"
        :data="addressData"
        highlight-current-row
        :show-header="false"
        @current-change="handleCurrentChange"
        style="width: 100%"
      >
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-form inline>
              <input
                v-model="scope.row.inputadress"
                class="inputadress"
                clearable
                placeholder="请输入您具体的卸货地点信息（选填）"
              />
            </el-form>
          </template>
        </el-table-column>
        <el-table-column type="index" width="50"> </el-table-column>
        <el-table-column property="address" label="地址" width="520px">
        </el-table-column>
        <el-table-column property="name" label="姓名" width="50px">
        </el-table-column>
        <el-table-column property="phone" label="电话" width="300px">
        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleDelete(scope.$index, scope.row)"
              >修改</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button @click="setCurrent()">取消选择</el-button>
      </div>
    </div>
    <el-row type="flex">
      <div>
        <img
          style="padding-left: 25px; padding-top: 20px"
          src="../../assets/images/u13577.png"
        />
      </div>
      <div style="padding-top: 30px; color: #169bd5">货物详情</div>
    </el-row>
    <!-- @row-click="handle"
        @selection-change="handleSelectionChange" -->
    <el-col style="padding: 20px">
      <el-table
        :data="shoppingData"
        border
        style="width: 100%; text-align: center"
      >
        <el-table-column
          class="sectable"
          prop="goodsname"
          type="expand"
          label="选择附属商品"
          width="50px"
        >
          <template slot-scope="scope">
            <el-table
              :data="scope.row.attacheditem"
              stripe
              style="width: 25%"
              :show-header="false"
              :header-cell-style="{ background: '#1a995c' }"
              :cell-style="{ color: '#1a995c' }"
              max-height="150"
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column
                prop="itemname"
                label="附属商品名称"
              ></el-table-column>
              <el-table-column label="附属商品数量">
                <template slot-scope="scope">
                  <el-input-number
                    v-model="scope.row.index"
                    @change.native="changeNum"
                    :min="1"
                    :max="10"
                    size="mini"
                  ></el-input-number>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="货物名称" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.Image" alt="" />
            <span>{{ scope.row.goodsname }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="model" label="型号" align="center">
        </el-table-column>
        <el-table-column label="数量" align="center">
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.index"
              @change.native="changeNum"
              :min="1"
              :max="10"
            ></el-input-number>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <div class="block" style="margin-left: 30px">
      <el-date-picker
        type="datetime"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
        v-model="startDate"
        time-arrow-control
        popper-class="date_picker"
        :picker-options="pickerOption"	
        label="选择期望时间"
      />
    </div>
    <el-divider style="margin: 10px 0"></el-divider>
    <el-input
      type="textarea"
      :rows="8"
      placeholder="请输入您的备注"
      v-model="textarea"
    >
    </el-input>
    <div style="margin-top: 20px">
      <el-row :gutter="20">
        <el-col :span="8"><div class="grid-content"></div></el-col>
        <el-col :span="11"
          ><div class="grid-content" style="text-align: right">
            已选2种商品，共15吨
          </div></el-col
        >
        <el-col :span="2"><div class="grid-content"></div></el-col>
        <el-col :span="3"><div class="grid-content"></div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8"><div class="grid-content"></div></el-col>
        <el-col :span="10"
          ><div class="grid-content" style="text-align: right">
            额外运费：
          </div></el-col
        >
        <el-col :span="3"
          ><div class="grid-content" style="text-align: left">
            ¥80.00
            <el-popover
              placement="top-start"
              title="规则说明"
              trigger="hover"
              content="该订单起送重量为13吨，您的商品合计重量为5吨，所以需要您补齐8吨的运费，每吨运费单价为10元，故合计80元运费。"
            >
              <el-button
                slot="reference"
                icon="el-icon-info"
                size="mini"
                circle
              ></el-button>
            </el-popover></div
        ></el-col>
        <el-col :span="3"><div class="grid-content"></div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8"><div class="grid-content"></div></el-col>
        <el-col :span="9"><div class="grid-content"></div></el-col>
        <el-col :span="2"
          ><div class="grid-content">
            <el-button type="primary" round>提交</el-button>
          </div></el-col
        >
        <el-col :span="5"><div class="grid-content"></div></el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import Header from "@/components//Header.vue";
export default {
  data() {
    return {
      pickerOption: {
        disabledDate(time) {
      // debugger;
      // var curTime = new Date();
      // var addHour = curTime.setHours(curTime.getHours() + 6);
      //如果没有后面的-8.64e7就是不可以选择今天的
      // return time > new Date(addHour);
      return time.getTime() < new Date().getTime() - 24 * 60 * 60 * 1000;
          // return time.getTime() < Date.now() - 30 * 60 * 60 * 1000;
        },
      },
      activeIndex: "1",
      activeIndex2: "1",
      dialogVisible: false,
      dialogFormVisible: false,
      value1: "",
      startDate:"",
      startTimeRange: "",
      addressform: {
        name: "",
        address: "",
        phone: "",
        delivery: false,
        type: [],
      },
      formLabelWidth: "120px",
      num: "",
      textarea: "",
      addressData: [
        {
          address: "浙江省杭州市西湖区联合大厦B座",
          name: "张三",
          phone: 13157188735,
          inputadress: "",
        },
        {
          address: "浙江省杭州市西湖区联合大厦B座",
          name: "张三",
          phone: 13157188735,
          inputadress: "",
        },
        {
          address: "浙江省杭州市西湖区联合大厦B座",
          name: "张三",
          phone: 13157188735,
          inputadress: "",
        },
      ],
      shoppingData: [
        {
          goodsname: "预拌抹灰砂浆",
          model: "DPM16",
          number: "1车",
          operate: "删除",
          price: "¥6200.00",
          describe: "按合同价",
          Image: require("../../assets/images/u988.png"),
          index: 1,
          attacheditem: [
            {
              itemname: "防冻剂",
              itemprice: "¥10.00",
              index: 1,
            },
            {
              itemname: "防冻剂",
              itemprice: "¥10.00",
              index: 1,
            },
            {
              itemname: "防冻剂",
              itemprice: "¥10.00",
              index: 1,
            },
            {
              itemname: "防冻剂",
              itemprice: "¥10.00",
              index: 1,
            },
          ],
        },
        {
          goodsname: "预拌抹灰砂浆",
          model: "DPM16",
          number: "1车",
          operate: "删除",
          price: "¥6200.00",
          describe: "按合同价",
          Image: require("../../assets/images/u988.png"),
          index: 1,
          attacheditem: [
            {
              itemname: "防冻剂",
              itemprice: "¥10.00",
              index: 1,
            },
            {
              itemname: "防冻剂",
              itemprice: "¥10.00",
              index: 1,
            },
            {
              itemname: "防冻剂",
              itemprice: "¥10.00",
              index: 1,
            },
            {
              itemname: "防冻剂",
              itemprice: "¥10.00",
              index: 1,
            },
          ],
        },
      ],
      multipleSelection: [],
    };
  },
  components: {
    Header,
  },
  methods: {
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleClick(row) {
      console.log(row);
    },

  },
};
</script>
<style scoped src="../../style/cconfirm.css">
</style>
<style lang="scss">
.date_picker .el-picker__footer .el-button--text {
	display: none;
}
</style>